{include file="../application/app/view/header.html"}
<link rel="stylesheet" type="text/css" href="/static/css/comment.css">
</head>
<body class="container-fluid">
	<section>
		<nav class="navbar navbar-default kesn_nav" role="navigation">
		  <div class="navbar-header">
		    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse-01">
		      <span class="sr-only">Toggle navigation</span>
		    </button>
		    <img src="/static/img/dashenli.png" alt="DSL WMS" class="col-md-5 col-md-offset-0">
		    <!-- <a class="navbar-brand" href="#">Flat UI</a> -->
		  </div>
		   <div class="collapse navbar-collapse" id="navbar-collapse-01">
            <ul class="nav navbar-nav login_nav">
              <li data-_user_id="{$user_id}" class="user_info"><a href="#fakelink">{$user_name}</a></li>
              <!-- <li class="logout" data-url="{$logout_url}"><a href="#fakelink">退出登录</a></li> -->
            </ul>

          </div><!-- /.navbar-collapse -->
		  <hr class="kesn_cutOffRule">
		  <ul class="navbar-nav col-md-12 kesn_linkUl">
		      <li class="col-md-2"><a href="/index.php/app/main/index">首页</a></li>
		      <li class="col-md-2"><a href="/index.php/app/course/index">教程</a></li>
		      <li class="col-md-2"><a href="/index.php/app/talk/index">论坛</a></li>
		      <li class="col-md-2"><a href="/index.php/app/resource/index">资料下载</a></li>
              <li class="col-md-2"><a href="/index.php/app/questions/index">资料下载</a></li>
		    </ul>
		  
		  </div>
		</nav><!-- /navbar -->		
	</section>
	<section>

         


	    <!--评论区域 begin-->
	   
	    <!--评论区域 end-->
	    <!--回复区域 begin-->
        <div class="row col-sm-10 col-md-offset-1 kesn_block">
	                <div class="hf-list-con">
                        {volist name="talkhf" id="talkhf"}
                        <div class="hf_block">
                        <div class="all-pl-con kesn_talkhf_item" data-talkhf_id="{$talkhf.id}">
                            <div class="pl-text hfpl-text clearfix">
                            <a href="#" class="comment-size-name" data-hf_id="{$talkhf.hfNameId}">{$talkhf.hfName}:</a><span class="my-pl-con">回复<a href="#" class="atName"  data-at_id={$talkhf.at_id}>{$talkhf.atName}</a> : {$talkhf.hfContent}</span>
                            </div>
                            <div class="date-dz"> 
                                <span class="date-dz-left pull-left comment-time">{$talkhf.hfTime}</span> 
                            <div class="date-dz-right pull-right comment-pl-block"> 
                                <a href="javascript:;" class="date-dz-pl pl-hf hf-con-block pull-left">回复</a> <span class="pull-left date-dz-line">|</span> 
                                <a href="/index.php/app/talk/index?talk_id={$talkhf.talk_id}" class="date-dz-pl pull-left detail" data-talk_id="{$talkhf.talk_id}">详情</a>
                            </div> 
                            </div>
                        </div>
                        </div>
                        {/volist}
                    </div>
	      </div>
	    <!--回复区域 end-->
		
        
	</section>
{$page}

{include file="../application/app/view/footer.html"}
<script type="text/javascript" src="/static/js/jquery.flexText.js"></script>
<script type="text/javascript">
    $(function () {
        $('.content').flexText();
    });
</script>
<!--textarea限制字数-->
<script type="text/javascript">
    function keyUP(t){
        var len = $(t).val().length;
        if(len > 139){
            $(t).val($(t).val().substring(0,140));
        }
    }
</script>

<script type="text/javascript">
    $('.kesn_block').on('click','.pl-hf',function(){
        //获取回复人的名字
        var fhName = $(this).parents('.date-dz-right').parents('.date-dz').siblings('.pl-text').find('.comment-size-name').html();
        //回复@
        var fhN = '回复@'+fhName;
        //var oInput = $(this).parents('.date-dz-right').parents('.date-dz').siblings('.hf-con');
        var fhHtml = '<div class="hf-con pull-left"> <textarea class="content comment-input hf-input" placeholder="" onkeyup="keyUP(this)"></textarea> <a href="javascript:;" class="hf-pl">评论</a></div>';
        //显示回复
        if($(this).is('.hf-con-block')){
            $(this).parents('.date-dz-right').parents('.date-dz').append(fhHtml);
            $(this).removeClass('hf-con-block');
            $('.content').flexText();
            $(this).parents('.date-dz-right').siblings('.hf-con').find('.pre').css('padding','6px 15px');
            //console.log($(this).parents('.date-dz-right').siblings('.hf-con').find('.pre'))
            //input框自动聚焦
            $(this).parents('.date-dz-right').siblings('.hf-con').find('.hf-input').val('').focus().val(fhN);
        }else {
            $(this).addClass('hf-con-block');
            $(this).parents('.date-dz-right').siblings('.hf-con').remove();
        }
    });
</script>
<!--评论回复块创建-->
<script type="text/javascript">
    $('.kesn_block').on('click','.hf-pl',function(){
        var _user = $('.user_info').children('a').html();
        var oThis = $(this);
        var myDate = new Date();
        //获取当前年
        var year=myDate.getFullYear();
        //获取当前月
        var month=myDate.getMonth()+1;
        //获取当前日
        var date=myDate.getDate();
        var h=myDate.getHours();       //获取当前小时数(0-23)
        var m=myDate.getMinutes();     //获取当前分钟数(0-59)
        if(m<10) m = '0' + m;
        var s=myDate.getSeconds();
        if(s<10) s = '0' + s;
        var now=year+'-'+month+"-"+date+" "+h+':'+m+":"+s;
        //获取输入内容
        var oHfVal = $(this).siblings('.flex-text-wrap').find('.hf-input').val();
        console.log(oHfVal)
        var oHfName = $(this).parents('.hf-con').parents('.date-dz').siblings('.pl-text').find('.comment-size-name').html();
        var oAllVal = '回复@'+oHfName;
        if(oHfVal.replace(/^ +| +$/g,'') == '' || oHfVal == oAllVal){

        }else {
            var user_name = $('.user_info').children('a').html();
            var hr_arr = {};
            hr_arr['talk_id'] = oThis.parents('.kesn_talkhf_item').find('.detail').attr('data-talk_id');
            hr_arr['atName'] = oHfName;
            hr_arr['ohfval'] = oHfVal;
            hr_arr['at_id'] = oThis.parents('.hf-con').parents('.date-dz').siblings('.pl-text').find('.comment-size-name').attr('data-hf_id');
            $.getJSON("creat_talkhf",hr_arr,function(data){
                console.log(data);
                var oAt = '';
                var oHf = '';
                $.each(data,function(n,v){
                    delete v.hfContent;
                    delete v.atName;
                    var arr;
                    var ohfNameArr;
                    if(oHfVal.indexOf("@") == -1){
                        data['atName'] = '';
                        data['hfContent'] = oHfVal;
                        data['at_id'] = '0';
                    }else {
                        arr = oHfVal.split(':');
                        ohfNameArr = arr[0].split('@');
                        data['hfContent'] = arr[1];
                        data['atName'] = ohfNameArr[1];
                        data['at_id'] = oThis.parents('.hf-con').parents('.date-dz').siblings('.pl-text').find('.atName').attr('data-at_id');
                    }

                    if(data.atName == ''){
                        oAt = data.hfContent;
                    }else {
                        oAt = '回复<a href="#" class="atName" data-at_id="'+data.at_id+'">@'+data.atName+'</a> : '+data.hfContent;
                    }
                    oHf = data.hfName;
                });

                 var oHtml = '<div class="kesn_con"><div class="pl-text hfpl-text clearfix">&nbsp;&nbsp;&nbsp;&nbsp;<span class="my-pl-con">'+user_name+oAt+'</span></div><div class="date-dz"> <span class="date-dz-left pull-left comment-time">&nbsp;&nbsp;&nbsp;&nbsp;'+now+'</span> </div></div>';
                oThis.parents('.hf_block').append(oHtml) && oThis.parents('.hf-con').siblings('.date-dz-right').find('.pl-hf').addClass('hf-con-block') && oThis.parents('.hf-con').remove();
            });
        }
    });
</script>

</footer>
</body>
</html>